<template>
  <div class="screen overview page-content">
    <screen-header :title="banner.name" :is-home="false"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6" class="ibox-group">
          <div class="ibox box1-1 bgv">
            <div class="ibox-header">
              <span class="ibox-title">本月工程维修监控</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/ma1_1.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="ibox-group">
          <div class="ibox box2-1" style="background: rgba(0, 0, 0, 0.1);">
            <div class="ibox-body text-center" style="padding: 4vh;">
              <img src="../assets/images/chart-images/ma2_1.png" alt="">
              <div class="info">
                <h4 class="num">
                  <animate-number v-if="overData.total" from="0" :to="overData.total" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>平台总维修任务</p>
              </div>
            </div>
          </div>
          <div class="ibox box2-2">
            <div class="ibox-header">
              <span class="ibox-title">工程维修任务趋势</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/ma2_2.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="ibox-group">
          <div class="ibox box3-1 bgv">
            <div class="ibox-header">
              <span class="ibox-title">工作监控</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/ma3_1.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      overData: {},
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        this.overData = {};
        this.initData();
      }
    }
  },
  mounted() {
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    turnPage(index, name) {
      this.$emit("change", index);
    },
    initData() {
      setTimeout(() => {
        this.overData = {
          total: 46538,
        };
      }, 100)
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .box1-1 {
    height: 90vh;
  }

  .box1-2 {
    height: 34vh;
  }

  .box2-1 {
    height: 58vh;

    .info {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -40%);
      .num{
        font-size: 2.8vw;
      }
      p{
        margin-top: 1vh;
        font-size: 0.8vw;
      }
    }
  }

  .box2-2 {
    height: 30vh;
  }

  .box3-1 {
    height: 90vh;
  }

  .box3-2 {
    height: 34vh;
  }
}
</style>